<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
         <title>SimpleUI 示例中心-drag</title>
		<meta name="description" content="SimpleUI是一个基于jQuery的组件库，适合用于构建web2.0的应用程序和小型网站" />
		<meta name="keywords" content="jQuery js simple ui simpleUI web application" />
		<link type="text/css" rel="stylesheet" href="../SyntaxHighlighter/SyntaxHighlighter.css"/>
		<link type="text/css" rel="stylesheet" href="../css/core.css"/>
		<style type="text/css">
			.demo-area{padding:10px;border:1px solid #eee;background:#fbfbfb;height:100px;}
			.drag-demo{position:relative;width:100px;height:100px;border:1px solid #ddd;background:#f6f6f6;}
            .drag-demo h2{margin:5px;color:#fff;background:#839CF7;padding: 3px 5px;text-align: center}
		    .demo-mail{float:left;width:120px;}
			.demo-mail li{line-height:25px;border-bottom:1px solid #ddd;padding-left:10px;cursor:pointer;}
			.mail-list{margin-left:140px;}
			.mail-list table{width:600px;}
			.mail-list td{border:1px solid #ddd;height:25px;padding-left:10px;}
			.drag-proxy{background:red;width:20px;height:20px;border-radius:10px;text-align:center;color:#fff;}
		    .demo-mail em{margin-left:10px;color:red}
			.mail-list td span{cursor:move;vertical-align:middle;}
			.mail-list td *{vertical-align:middle;}
		</style>
    </head>
    <body>
    	<div class="container clearfix" id="hd">
        	<h1 class="s-logo"></h1>
			<div class="s-nav">
				<span class="s-nav-l"></span>
				<span class="s-nav-r"></span>
				<ul class="clearfix">
                    <li class="current">
                        <a href="/doc/doc.html">文档</a>
                    </li>
                    <li>
                        <a href="/doc/demo.html">示例</a>
                    </li>
                    <li>
                        <a href="http://code.google.com/p/simple-ui/downloads/list">下载</a>
                    </li>
                    <li>
                        <a href="/doc/deploy.html">部署</a>
                    </li>
					<li>
                        <a href="http://www.iqianduan.org/t-191-1-1.html" target="_blank">论坛</a>
                    </li>
                    <li>
                        <a href="#">关于</a>
                    </li>
                </ul>
			</div>
		</div>
		<div class="container" id="bd">
			<h2 class="s-title">SimpleUI示例中心</h2>
			<div class="clearfix doc-content demo-content">
				<div class="api-content">
					<h2 class="api-name">Drag And Drop Demo</h2>
					<h3 class="api-guide">简单示例</h3>
					<textarea name="code" class="js"> 
$("#test").drag({
handle:"h2"
});
	 				</textarea>
					<div class="demo-area">
						<div id="test" class="drag-demo">
                               <h2>拖动启动</h2>
                        </div>
					</div>
                    <h3 class="api-guide">复杂示例</h3>
					<div class="demo-area">
                          <div class="demo-mail">
                          	<ul>
                          		<li  rel="all">全部<em>3</em></li>
                          		<li class="drop" rel="receive">收件箱<em></em></li>
								<li class="drop" rel="send">发件箱<em></em></li>
								<li>草稿<em></em></li>
                          	</ul>
                          </div>               
                          <div class="mail-list">
                          	  <table>
                          	  	<tr>
                          	  		<td><span>|||</span><input type="checkbox"/></td>
                          	  		<td>今天做了些什么?</td>
                          	  		<td>2011/05/26</td>
                          	  	</tr>
								<tr>
                                    <td><span>|||</span><input type="checkbox"/></td>
                                    <td>特大优惠?</td>
                                    <td>2011/10/26</td>
                                </tr>
								<tr>
                                    <td><span>|||</span><input type="checkbox"/></td>
                                    <td>今天做了些什么?</td>
                                    <td>2011/05/26</td>
                                </tr>
                          	  </table>
                          </div>                       
					</div>
					<textarea name="code" class="js"> 
$(".mail-list tr span").drag({
    proxy:function(){
        return $("<div/>").addClass("drag-proxy")
    },
    atCursor:{
        top:-5,
        left:10
    },
    revert:true,
    dropElements:".demo-mail .drop",
    ondragstart:function(e,drag){
        drag.dropElements.css("background","#f1f1f1");
    },
    ondrag:function(e,drag){
        var length=$(".mail-list :checked").length;
        drag.proxyElement.text(length);
    },
    ondragstop:function(e,drag){
        drag.dropElements.css("background","transparent");
    },
    ondragenter:function(over,drag){
        over.css("background","green");
    },
    ondragleave:function(over,drag){
        over.css("background","#f1f1f1");
    },
    ondragdrop:function(over,drag){
        over.find("em").text($(".mail-list :checked").length);
        $(".mail-list :checked").parents("tr")
        .addClass("drag_"+over.attr("rel"))
        //.hide();
        $(".mail-list :checked").removeAttr("checked");
    }
});
$(".demo-mail li").click(function(){
    var rel=$(this).attr("rel");
    if(rel=="all"){
        $(".mail-list tr").show();
    }else{
        $(".mail-list tr").hide();
        $(".drag_"+rel).show();
    }
});
                    </textarea>
				</div>
			</div>
		</div>
		<script src="../SyntaxHighlighter/shCore.js"></script>
		<script src="../SyntaxHighlighter/allmin.js"></script>
		<script type="text/javascript">
		window.onload = function () {
			dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
			dp.SyntaxHighlighter.HighlightAll('code');
		} 
		</script>
		<script type="text/javascript" src="../../src/jquery.js"></script>
		<script type="text/javascript" src="../../src/_beta/SimpleCore.js">
        </script>
		<script type="text/javascript" src="../../src/_beta/SimpleDrag/SimpleDrag.js"></script>
		<script type="text/javascript">
		(function(){
			var ajaxHtmlStore={},
			 getHtml=function(url){
			 	var temp;
				if(ajaxHtmlStore[url]){
					$(".api-content").html(ajaxHtmlStore[url]);
					dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
					dp.SyntaxHighlighter.HighlightAll('code');
				}else{
					$.get(url,function(res){
						ajaxHtmlStore[url]=res;
						$(".api-content").html(ajaxHtmlStore[url]);
						dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
						dp.SyntaxHighlighter.HighlightAll('code');
					});
				}
			}
			$(".s-list a,.ajax-load").live("click",function(){
				var url=$(this).attr("href");
				getHtml(url);
				return false;
			});
			$("#test").drag({handle:"h2"});
			$(".mail-list tr span").drag({
				proxy:function(){
					return $("<div/>").addClass("drag-proxy")
				},
				atCursor:{
					top:-5,
					left:10
				},
				revert:true,
				dropElements:".demo-mail .drop",
				ondragstart:function(e,drag){
					drag.dropElements.css("background","#f1f1f1");
				},
				ondrag:function(e,drag){
					var length=$(".mail-list :checked").length;
					drag.proxyElement.text(length);
				},
				ondragstop:function(e,drag){
					drag.dropElements.css("background","transparent");
				},
				ondragenter:function(over,drag){
					over.css("background","green");
				},
				ondragleave:function(over,drag){
					over.css("background","#f1f1f1");
				},
				ondragdrop:function(over,drag){
					over.find("em").text($(".mail-list :checked").length);
					$(".mail-list :checked").parents("tr")
					.addClass("drag_"+over.attr("rel"))
					//.hide();
					$(".mail-list :checked").removeAttr("checked");
				}
			})
			$(".demo-mail li").click(function(){
				var rel=$(this).attr("rel");
				if(rel=="all"){
					$(".mail-list tr").show();
				}else{
					$(".mail-list tr").hide();
                    $(".drag_"+rel).show();
				}
			})
		})();
		</script>
		<span style="display:none"><script src="http://s24.cnzz.com/stat.php?id=3606083&web_id=3606083"></script></span>
    </body>
</html>
